<template>
  <div class="login-container">
    <div class="login-box">
      <!-- 头像 -->
      <div class="avatar_box">
        <img src="../assets/avatar_box.jpg" alt="avatarImage" />
      </div>
      <!-- 登录表单 -->
      <el-form :model="form" :rules="loginFormRules" ref="_form">
        <el-form-item label="用户名：" prop="userName" label-width="100px">
          <el-input 
            prefix-icon="User" 
            v-model="form.userName"
            ref="_formUserName"
          />
        </el-form-item>
        <el-form-item label="密&nbsp;码：" prop="password" label-width="100px">
          <el-input
            type="password"
            prefix-icon="Lock"
            v-model="form.password"
          />
        </el-form-item>
        <div class="btns">
          <el-button type="primary" @click="onSubmit">登录</el-button>
          <el-button type="info" @click="resetFormStatus">重置</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { ref, getCurrentInstance } from "vue";
import { ElMessage } from 'element-plus';
import axios from '../axios';
import { useRouter } from "vue-router";
export default {
  name: "Login",

  setup(props,context) {
    // 获取当前的this
    const _this = getCurrentInstance();
    // 定义表单数据对象
    let form = ref({
      userName: "",
      password: "",
    });
    // 登录请求后返回数据
    let userData;
    // router
    let router = useRouter();

    // 方法
    // - 重置表单状态
    let resetFormStatus = ()=>{
      _this.refs._form.resetFields();
      _this.refs._formUserName.focus();
    }
    // - submit提交
    let onSubmit = ()=>{
      _this.refs._form.validate((valid) => {
        if (valid) {
          // 验证通过，执行表单提交操作
          axios.post('login',{
            username:form.value.userName,
            password:form.value.password
          }).then(response=>{
            userData = response.data;
            if(userData.meta.status == 200){
              sessionStorage.setItem("token",JSON.stringify(userData.data.token))
              ElMessage({
                message: '登录成功',
                type: 'success'
              });
              router.push({
                path:'/home',
              })
            }else{
              ElMessage.error("登录失败，请查看用户信息是否错误！");
            }
          },error=>{
            console.log(error.message);
          });
        } else {
          // 验证失败，提示用户错误信息
          ElMessage.error("登录失败，请查看用户信息是否错误！");
        }
    })
  };
    
    // 表单校验规则
    const loginFormRules = {
      userName: [
        { required: true, message: "请输入登录名称", trigger: "blur" },
        { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
      ],
      password: [
        { required: true, message: "请输入登录密码", trigger: "blur" },
        { min: 6, max: 15, message: "长度在 6 到 15 个字符", trigger: "blur" },
      ],
    };

    return {
      form,
      loginFormRules,

      // 暴露的所有方法
      resetFormStatus,
      onSubmit,
    };
  },
};
</script>

<style lang="less" scoped>
.login-container {
  background-color: #69a5cd;
  height: 100%;
  position: relative;
  .login-box {
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); // x和y轴各负面平移自身长宽的50%
    .avatar_box {
      width: 110px;
      height: 110px;
      border: 1px solid #eee;
      border-radius: 50%;
      padding: 8px;
      box-shadow: 0 5px 20px #c1c1c1;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -55%);
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    // 表单样式
    .el-form {
      width: 60%;
      margin: 0 auto;
      margin-top: 100px;
      .el-input {
        width: 190px;
      }
      .btns {
        padding-top: 10px;
        display: flex;
        justify-content: space-evenly;
      }
    }
  }
}
</style>